<template>
	<view class="loginByPhoneCode-conatiner">
		<view class="content-box">
			<view class="content-desc-box">
				<view class="left-text-box">
					<view class="left-text">你好，</view>
					<view class="left-text">欢迎使用聚省</view>
					<view class="gap-line"></view>
					<view class="left-text-desc">购物不花冤枉钱，让购物更划算</view>
				</view>
				<view class="right-img-box">
					<image src="/static/login/shopCar.png" class="right-img"></image>
				</view>
			</view>
			<view class="content-form-box">
				<view class="input-box mb-12">
					<u-input v-model.trim="pageForm.phone" type="number" placeholder="请输入手机号" maxlength="11" height="36" />
				</view>
				<view class="input-box mb-12 p-6">
					<u-input v-model.trim="pageForm.code" type="number" placeholder="请输入验证码" maxlength="6" height="36" />
					<view class="getCode">
						<text @click="getCode" v-if="showGetCode" class="sendCode-text">发送验证码</text>
						<u-verification-code v-show="false" :seconds="seconds" ref="uCode" @change="codeChange" change-text="x" end-text="0"></u-verification-code>
						<text class="sendCode-text-second" v-if="!showGetCode">{{ tips }}秒重新获取</text>
					</view>
				</view>
				<!-- 用户隐私协议 -->
				<view class="agreement-box">
					<u-checkbox v-model="isAgree" @change="checkboxChange" shape="circle" activeColor="#ff0309" size="28rpx" name="isAgree"></u-checkbox>
					<view class="text">已阅读并同意</view>
					<view @click="goAgreement('register')" class="agreement-text">《聚省隐私协议》</view>
					<view @click="goAgreement('privacy')" class="agreement-text">《用户协议》</view>
				</view>
				<view @click="phoneLoginFun" class="btn-box">登录</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { publicKey, privateKey } from '@/utils/secretKey';
import RSA from '@/utils/rsa.js';
import { phoneLogin, sendSms } from '@/api/login.js';
import { useUserStore } from '@/store/userStore.js';

const userStore = useUserStore();

const pageForm = ref({
	phone: '',
	code: ''
});

// 同意用户隐私协议
const isAgree = ref(false);

// 获取验证码
const showGetCode = ref(true);
const uCode = ref(null); // 验证码倒计时组件实例
const getCode = () => {
	if (uni.$u.test.mobile(pageForm.value.phone)) {
		uni.showLoading({
			title: '正在获取验证码'
		});
		getPhoneCode();
	} else {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		});
	}
};

// 获取验证码
const getPhoneCode = async () => {
	let dataObj = {
		phone: pageForm.value.phone,
		type: 'login'
	};

	let rsa_encrypt_res = await RSA.encrypt(dataObj, publicKey);

	let sendSmsn_res = await sendSms(rsa_encrypt_res);

	let rsa_decrypt_res = await RSA.decrypt(sendSmsn_res.data);

	uni.hideLoading();

	if (sendSmsn_res.code == 0) {
		uCode.value.start();
		showGetCode.value = false;
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		});
	}
};

// 验证码倒计时变化
const tips = ref('');
const seconds = ref('60');
const codeChange = (text) => {
	console.log(text);
	tips.value = text;
	if (tips.value < 1) {
		showGetCode.value = true;
		uCode.value.reset();
	}
};

// 登录
const phoneLoginFun = async () => {
	if (!isAgree.value) {
		uni.showToast({
			title: '请勾选阅读相关协议',
			icon: 'none'
		});
		return;
	}

	if (!pageForm.value.phone) {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		});
		return;
	}

	if (!pageForm.value.code) {
		uni.showToast({
			title: '请输入验证码',
			icon: 'none'
		});
		return;
	}

	let loginObj = {
		phone: pageForm.value.phone,
		code: pageForm.value.code
	};
	let rsa_encrypt_res = await RSA.encrypt(loginObj, publicKey);

	let login_res = await phoneLogin(rsa_encrypt_res);

	let rsa_decrypt_res = await RSA.decrypt(login_res.data);

	console.log('解密数据', rsa_decrypt_res);

	if (login_res.code == 0) {
		userStore.setUserToken(rsa_decrypt_res.access_token);
		userStore.assignUserAccessInfo(rsa_decrypt_res);

		uni.switchTab({
			url: '/pages/home/index'
		});
	} else if (login_res.code == 10011) {
		uni.navigateTo({
			url: '/subPages/bindingInviteCode/index?phone=' + rsa_decrypt_res
		});
	}
};
</script>

<style lang="scss">
.loginByPhoneCode-conatiner {
	background-image: url('~@/static/login/loginByPhoneCode-bg.png');
	background-size: 100% 327px;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;
	padding: 44px 20px 0;

	.content-box {
		display: flex;
		flex-direction: column;
		height: 100%;

		.content-desc-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-text-box {
				flex: 1;

				.left-text {
					font-size: 26px;
					font-weight: 600;
					line-height: 36.4px;
					white-space: nowrap;
				}

				.left-text-desc {
					font-size: 14px;
					font-weight: 400;
					line-height: 18px;
					white-space: nowrap;
				}

				.gap-line {
					width: 40px;
					height: 2px;
					border-radius: 34px;
					margin: 8px 0 10px;
					background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
				}
			}

			.right-img-box {
				transform: translateX(7%);

				.right-img {
					width: 200px;
					height: 194px;
				}
			}
		}

		.content-form-box {
			flex: 1;
			height: 100%;
			padding: 24px 20px;
			border-radius: 20px 20px 0 0;
			background-color: #fff;

			.input-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 12px;
				padding: 16px 12px;
				background-color: #f9f9f9;

				.getCode {
					font-size: 14px;
					line-height: 18px;
					padding: 10px 15px;
					border-radius: 8px;
					background-color: #fff;

					.sendCode-text {
						color: #ff0309;
					}
				}
			}

			.p-6 {
				padding: 6px 6px 6px 12px;
			}

			.agreement-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: start;
				margin-top: 24rpx;
				font-size: 24rpx;

				.u-checkbox {
					position: relative;
					top: 0.5px;
					margin-right: 6px;
				}

				.u-checkbox__label {
					display: none;
				}

				.text {
					color: #333;
				}

				.agreement-text {
					color: #ff0309;
				}
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				width: 100%;
				height: 50px;
				font-weight: 500;
				font-size: 16px;
				margin: 20px 0;
				border-radius: 34px;
				background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
			}
		}
	}
}
</style>
